<template>
  <div class="areaCom">
    <lay-card style="padding:10px;">
      <lay-row space="10">
        <lay-form :model="form">
          <lay-col md="7">
            <lay-form-item label="接收人" prop="getUid" required>
              <lay-input v-model="form.getUid" v-show="false"></lay-input>
              <span class="tip">
                <lay-avatar :src="avatar(form.getUserAvatar)" radius></lay-avatar> {{ form.getNickname }}
              </span>
            </lay-form-item>
          </lay-col>
          <lay-form-item label="标题" prop="title" required required-error-message="标题不能空">
            <lay-col md="18">
              <lay-input v-model="form.title"></lay-input>
            </lay-col>
          </lay-form-item>

          <lay-form-item label="内容" prop="content">
            <lay-col md="24">
              <WangEditor v-model="form.content"></WangEditor>
            </lay-col>
          </lay-form-item>
          <div v-permission="PerKey.Upload_Upload">
            <lay-field title="附件">
              <UploadAttments v-model="form.att" :uplabel="'附件上传'" :attList="getAttments" />
            </lay-field>
          </div>
          <div class="closeBtn">
            <lay-button v-if="btnHide" @click="submitClick" type="primary" v-permission="PerKey.Notice_AddOrEdit"
              prefix-icon="layui-icon-reply-fill">
              回复
            </lay-button>
          </div>
        </lay-form>
      </lay-row>
    </lay-card>

  </div>
</template>

<script lang="ts" name = "NoticeAnswer" setup>
import { reactive, watch, toRefs, ref } from "vue";
import WangEditor from '../../../../layouts/Editor/wangEditor.vue'
import UploadAttments from '../../../../layouts/Upload/UploadAttments.vue'
import { systemConfig } from "../../../../library/config"
import { layer } from "@layui/layer-vue";
import { Attment } from "../../../../types/attment"
import { getReply, postAdd } from "../../../../api/module/notice";
import { PerKey } from "../../../../library/permissionConst"
interface UploadProps {
  answerUid: number,
}
const props = withDefaults(defineProps<UploadProps>(), {
  answerUid: 0,
});
//定义模型
const putData = reactive({
  form: {
    id: 0,
    title: "",
    content: "",
    att: "",
    getUid: "",
    postTime: "",
    getUserAvatar: "",
    getNickname: "",
  },
  getAttments: [<Attment>{}],
})
let formGetUid: number[] 

const avatar = (src: string) => {
  return src != null ? systemConfig.hostURL + src : null
}
const emit = defineEmits(["update:modelValue"])
const { form, getAttments } = toRefs(putData)
const answerUid = ref(props.answerUid)
getReply(answerUid.value).then((res) => {
  if (res.status == 1) {
    let data = res.data.data
    formGetUid = [data.id]
    form.value.getUserAvatar = data.avatar
    form.value.getNickname = data.nickName
    getAttments.value = []
  } else {
    layer.msg("获取基本信息失败！", { icon: 2 })
  }
})
watch(
  () => props.answerUid,
  (value) => {
    answerUid.value = value;
  },
)
const btnHide = ref(true)
const submitClick = function () {
  if (!form.value.title || !form.value.content) {
    layer.msg("标题和内容不能空")
    return
  }
  btnHide.value = false
  if (form.value.att != null)//对附件进行类型转换
    form.value.att = String(form.value.att)
  form.value.getUid = JSON.stringify(formGetUid)
  postAdd(form.value).then((res) => {
    if (res.status == 1) {
      layer.msg(res.msg, { time: 2000, icon: 1 }, () => {
        emit('update:modelValue', false)
      });
    } else {
      layer.msg(res.msg, { icon: 2 });
      return false;
    }
  });
};
</script>
<style scoped>
.closeBtn {
  margin: auto;
  height: 40px;
  line-height: 40px;
  width: 120px;
}

.areaCom {
  padding: 20px;
}

.w-e-text-container {
  height: 100px !important;
  /*wangEditor行内样式设置的高度300px*/
}
</style>